<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css盒子模型</title>
	<style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	#div-box1{
		width:500px;
		height:400px;
		border:1px solid silver;
		margin-top:20px;
		margin-left:15px;
		margin-right:15px;
		float:right;
		/*margin:0px auto;*/
	}
	.ul-class li{
		list-style-type:none;
		border:1px solid red;
		width:60px;
		height:80px;
		margin:20px 0 0 15px;
		float:left;
	}
	.ul-class img{
		width:40px;
		margin-left:10px;
		margin-top:10px;
	}
	.ul-class a:link{
		color:black;
		text-decoration:none;
		font-size:small;
		margin:18px 0 0 18px;
	}
	.ul-class a:hover{
		text-decoration:underline;
		color:red;
	}
	</style>
 </head>
 <body>
	<div id="div-box1">
		<ul class="ul-class">
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			<li><img src="aa.bmp"><span><a href="#">明星</a></span></li>
			
		</ul>
	</div>
 </body>
 </html>